<template>
    <div>
      <div class="sousuo">
        <figure class="left">
          <img src="../assets/wqc4.jpg" alt="">
        </figure>
         <figure class="right">
           <input type="text" placeholder="请输入您所搜索的商品">
        </figure>
      </div>

      <swiper class="banner" :options="swiperOption">
          <swiper-slide><img src="../assets/banner1.jpg"></swiper-slide>
          <swiper-slide><img src="../assets/banner1.jpg"></swiper-slide>
          <swiper-slide><img src="../assets/banner1.jpg"></swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- <div class="swiper-button-next" slot="button-next"></div>
          <div class="swiper-button-prev" slot="button-prev"></div> -->
      </swiper>

      <div class="bottom">
        <figure class="b_left">
          <img src="../assets/wqc.jpg" alt="">
        </figure>
        <figure class="b_right">
          <p>XXX上市了，赶紧抢！！！</p>
        </figure>
      </div>
    </div>
</template>

<script>
export default {
  name: "sybanner",
  data() {
    return {
      swiperOption: {
        // 按照文档中的配置项
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          type: "bullets"
        },
        navigation: {
          // nextEl: ".swiper-button-next", //前进按钮的css选择器或HTML元素。
          // prevEl: ".swiper-button-prev" //后退按钮的css选择器或HTML元素。
          // hideOnClick: true, //点击slide时显示/隐藏按钮
          // disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
          // hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
        }
      }
    };
  }
};
</script>

<style scoped lang="scss">
.sousuo{
  height:.9rem;
  background-color: #f23030;
  display: flex;
  align-items: center;
  .left{
    width: 15%;
    img{
      width: 50%;
      display: block;
      margin: 0 auto;
      background-color: red;
    }
  }
  .right{
    flex: 1;
    input{
      width: 90%;
      height: .6rem;
      border-radius: .1rem; 
      text-align: center;
      font-size: .2rem;
    }
  }
}
.banner {
  img {
    display: block;
    width: 100%;
  }
}
.bottom{
  height:.8rem;
  display: flex;
  align-items: center;
  background-color: white;
  .b_left{
    width: 20%;
    height: .6rem;
    text-align: center;
    border-right: 1px solid #ccc;
    img{
      height: .6rem;
    }
  }
  .b_right{
    flex: 1;
    p{
      font-size: .3rem;
      padding-left: .5rem;
    }
  }
}
</style>
